<template>
  <div class="pay_wrap">
    <div class="pay_detail">
      <p class="title">订单提交成功，请您尽快付款！</p>
      <p>
        <span>订单号： {{ mergeOrderId }}</span
        ><span>|</span><span>付款金额（ 云 ）：</span
        ><span>{{ totalPrices }} 元</span>
      </p>
    </div>
    <div class="pay_method">
      <p class="title">选择支付方式</p>
      <div class="methods">
        <!-- <el-radio v-model="pay" label="1">
          <el-image :src="require('../../assets/imgs/alipay.png')" />
          支付宝支付
        </el-radio> -->
        <el-radio v-model="payMethod" label="2">
          <el-image :src="require('../../assets/imgs/wxpay.png')" />
          微信扫码支付
        </el-radio>
      </div>
    </div>
    <el-button @click="pay">确认支付</el-button>
    <el-dialog
      title="支付"
      :visible="visible"
      width="300px"
      center
      @close="closeDialog"
    >
      <p class="tips">请使用微信扫描二维码完成支付</p>
      <div class="qrcode" ref="qrCodeUrl"></div>
    </el-dialog>
  </div>
</template>

<script>
import QRCode from "qrcodejs2";
import { get_data } from "../../utils/utils";
export default {
  data() {
    return {
      payMethod: "2",
      mergeOrderId: "",
      totalPrices: 0,
      qrUrl: "",
      visible: false,
      customerId: "",
      timer: -1,
      isClick: false,
    };
  },
  created() {
    this.mergeOrderId = this.$route.query.mergeOrderId;
    this.totalPrices = this.$route.query.totalPrices;
  },
  mounted() {},

  methods: {
    closeDialog() {
      this.visible = false;
      this.isClick = false;
      this.qrUrl = "";
      if (this.timer) {
        clearInterval(this.timer);
      }
      this.timer = null;
    },
    pay() {
      this.$http
        .fetch(this.$apiPath.pay, {
          method: "post",
          data: {
            mergeOrderId: this.mergeOrderId,
          },
        })
        .then((res) => {
          if (res.code == 200) {
            if (!this.isClick) {
              this.isClick = !this.isClick;
              this.qrUrl = res.data;
              this.creatQrCode();
              this.visible = true;
              this.loopQuery();
            }
          }
        });
    },
    getOrderStatusPc() {
      this.$http
        .fetch(this.$apiPath.getOrderStatusPc, {
          params: {
            orderId: this.mergeOrderId,
          },
        })
        .then((res) => {
          if (res.code == "200") {
            this.visible = false;
            this.$message.success("恭喜你支付成功，即将跳往订单中心...");
            if (this.timer) {
              clearInterval(this.timer);
            }
            this.timer = null;
            setTimeout(() => {
              let userInfo = get_data("userInfo");
              userInfo = JSON.parse(userInfo);
              this.$router.push({
                path: "/order/userCards?id=" + userInfo.id + "&active=" + 2,
              });
            }, 2000);
          }
        });
    },
    creatQrCode() {
      setTimeout(() => {
        this.$nextTick(() => {
          this.$refs.qrCodeUrl.innerHTML = "";
          new QRCode(this.$refs.qrCodeUrl, {
            text: this.qrUrl, // 需要转换为二维码的内容
            width: 200,
            height: 200,
            colorDark: "#000000",
            colorLight: "#ffffff",
            correctLevel: QRCode.CorrectLevel.H,
            render: "cavas",
          });
        });
      }, 500);
    },
    loopQuery() {
      this.timer = setInterval(() => {
        this.getOrderStatusPc();
      }, 1000);
    },
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer);
    }
    this.timer = null;
  },
};
</script>

<style lang="less" scoped>
@import url("./index.less");
</style>
